<template>
  <el-container class="annualexpenseaccoutting-form">
    <el-header height="40px" class="header">
	    <el-row type="flex" justify="space-between">
	      <span class="title">年度经费预算报销</span>
	      <div>
	      	<el-button v-show="annualexpenseaccouttingRecord.jfbxbh && annualexpenseaccouttingRecord.jfbxbh!='' "
          type="success" size="mini" icon="el-icon-check" @click="onSaveClick">保存</el-button>
	      	<el-button type="warning" size="mini" icon="el-icon-close" @click="onCloseClick">关闭</el-button>
	      </div>
	    </el-row>
	  </el-header>
    <el-main class="main">
      <simple-panel :panelTitle="'经费开支清单（'+annualexpenseaccouttingRecord.nd+'年）'">
        <template slot="main">
          <dynamic-table :tableData="budgetData" :columns="budgetColumns" :islalCheck="true" buttonPosition="bottomLeft"
          addBtnText="添加预算条目" delBtnText="删除" :showInsBtn="false" delBtnClsType="danger">
          </dynamic-table> 
          <h3>合计：￥{{jfhj}}</h3>
        </template>
      </simple-panel> 
    </el-main>
  </el-container>
</template>
<script>
import SimplePanel from "@/components/basic/SimplePanel";
import TablePanel from "@/components/basic/TablePanel";
import DynamicTable from "@/components/basic/DynamicTable";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import { trueFalseRenderer } from "@/utils/tableutils.js";

//meta info

var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证


// 预算支出明细
var budgetColumns =[
  {
    prop:"jfbxmxbh",
    label:"经费报销明细编号",
    hidden:true
  },
  {
    prop:"xh",
    label:"序号",
    width:60,
    type:"myIndex"
  },
  {
    prop:"jfzckm",
    label:"经费支出科目",
    width:200,
    type:"input"
  },
  {
    prop:"ytsm",
    label:"用途说明",
    type:"input"
  },
  {
    prop:"je",
    label:"金额",
    width:200,
    type:"number"
  }
];

export default {
  name:"AEAForm",
  props: {
    formRecord: {
      type: Object
    },
    formRules: {
      type: Object
    }
  },
  components:{
    "simple-panel": SimplePanel,
    "table-panel": TablePanel,
    "dynamic-table": DynamicTable
  },
  computed:{
    jfhj:function(){//经费合计
      var me = this;
      var total = 0;
      me.budgetData.forEach((item,index)=>{
        if(!Number.isNaN(item.je)){
          total+= item.je;
        }
      });
      return total;
    }, 
  },
  methods:{
    onSaveClick:function(){
      console.log("保存！！！");// TODO 这里需要保存一些信息，要理一下
    },
    onCloseClick:function(){// 关闭页面
      this.$emit("form-close");
    }
  },
  data(){
    return {
      annualexpenseaccouttingRecord: {},
      annualexpenseaccouttingRules: {},
      constructionSelected:{},
      budgetColumns:budgetColumns,// 预算支出
      budgetData:[]
    }
  },
  created() {
    var me = this;
    me.annualexpenseaccouttingRules = me.formRules;// 冒泡进来
    me.annualexpenseaccouttingRecord = me.formRecord;// 冒泡进来

  }
}
</script>
<style lang="scss">
@import "@/assets/scss/basic.scss";

.annualexpenseaccoutting-form{
  height: 100%; // 2018-06-11
  margin: 0 5px;

  .header {
    background-color: $--border-level-3;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;

    .title {
      font-size: 20px;
      color: $--color-primary;
    }
  }

  .main {
    // height: 100%;
    margin: 0;
    padding: 0;

    
    .budget-form{
      margin-top: 5px;
    }
    
    .el-form-item label{
      float: left;
    }
  }

}
</style>
